<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="loancalculator.css">
<title>Loan Calculator</title>
</head>
<body>
<div id="loancal">
<h1>Loan Calculator</h1>
<p>Loan Amount: $<input id="amount" type="number" min="1" max="5000000" onchange="computeLoan()"></p>
<p>Interest Rate: %<input id="interest_rate" min="0" max="100" value="10" step=".1" onchange="computeLoan()">
</p>
<p>Months to Pay: <input id="months" type="number" min="1" max="300" value="1" step="1"
onchange="computeLoan()"></p>
<h2 id="payment"></h2>
</div>
<script>
function computeLoan() {
const amount = document.querySelector('#amount').value;
const interest_rate = document.querySelector('#interest_rate').value;
const months = document.querySelector('#months').value;
const interest = (amount * (interest_rate * 0.01)) / months;
let payment = ((amount / months) + interest).toFixed(2);
payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.querySelector('#payment').innerHTML = `Monthly Payment = ${payment}`
}
</script>
</body>
</html>